
<template>
    <div class="flex2 ww100 flex-col-ss mb15 hidden">
      <div class="flex-bc ww100 mb5">
        <span>视频监控</span>
        <span>
          <img class="ml5 cursor" src="@/assets/images/e1.png" @click="type = '1'">
          <img class="ml5 cursor" src="@/assets/images/e2.png" @click="type = '4'">
          <img class="ml5 cursor" src="@/assets/images/e3.png" @click="type = '9'">
        </span>
      </div>
      <div v-if="!isNull(publicStore._public.cameraList)" class="ww100 flex1 overlay tc flex-ss warp hidden">
        <div v-for="(v, i) in publicStore._public.cameraList" :key="i" class="borderstyle relative rad12 hidden" :class="type=='1'?'list1-10 hh100':type=='4'?'list2-10':'list3-10'" style="box-sizing: border-box;">
        <video class="video" muted="true" autoplay="true" :id="'video'+i" preload="true" @click.stop="clickVideo(i)"></video>
        <table v-show="videoIndex == i" class="absolute t10 r10 z2">
          <tr>
            <td><button class="buttonStyle" @mousedown="onmousePtzControl(5,0)" @mouseup="onmousePtzControl(5,1)"><i-ep-topLeft /></button></td>
            <td><button class="buttonStyle" @mousedown="onmousePtzControl(1,0)" @mouseup="onmousePtzControl(1,1)"><i-ep-top /></button></td>
            <td><button class="buttonStyle" @mousedown="onmousePtzControl(6,0)" @mouseup="onmousePtzControl(6,1)"><i-ep-topRight /></button></td>
          </tr>
          <tr>
            <td><button class="buttonStyle" @mousedown="onmousePtzControl(3,0)" @mouseup="onmousePtzControl(3,1)"><i-ep-back /></button></td>
            <td></td>
            <td><button class="buttonStyle" @mousedown="onmousePtzControl(4,0)" @mouseup="onmousePtzControl(4,1)"><i-ep-right /></button></td>
          </tr>
          <tr>
            <td><button class="buttonStyle" @mousedown="onmousePtzControl(7,0)" @mouseup="onmousePtzControl(7,1)"><i-ep-bottomLeft /></button></td>
            <td><button class="buttonStyle" @mousedown="onmousePtzControl(2,0)" @mouseup="onmousePtzControl(2,1)"><i-ep-bottom /></button></td>
            <td><button class="buttonStyle" @mousedown="onmousePtzControl(8,0)" @mouseup="onmousePtzControl(8,1)"><i-ep-bottomRight /></button></td>
          </tr>
          <tr>
            <td class="f14">焦距</td>
            <td><button class="buttonStyle2" @mousedown="onmousePtzControl(9,0)" @mouseup="onmousePtzControl(9,1)"><img src="@/assets/images/bbig.png"></button></td>
            <td><button class="buttonStyle2" @mousedown="onmousePtzControl(10,0)" @mouseup="onmousePtzControl(10,1)"><img src="@/assets/images/bsmall.png"></button></td>
          </tr>
          <tr>
            <td class="f14">焦点</td>
            <td><button class="buttonStyle2" @mousedown="onmousePtzControl(11,0)" @mouseup="onmousePtzControl(11,1)"><img src="@/assets/images/light1.png"></button></td>
            <td><button class="buttonStyle2" @mousedown="onmousePtzControl(12,0)" @mouseup="onmousePtzControl(12,1)"><img src="@/assets/images/light2.png"></button></td>
          </tr>
        </table>
        <div class="absolute t10 l10 z3 none" @click="stopV(v, i)">停止</div>
        <div class="absolute t10 l10 z3 none" @click="startV(v, i)">开始</div>
      </div>
    </div>
    <div v-if="isNull(publicStore._public.cameraList)" class="ww100 hh100 flex-cc">请配置摄像头</div>
  </div>
</template>

<script lang="ts" setup>
  import {startPreview, createConn, destroyConn, stopPreview, ptzControl} from '@/video/c2sdk_web.js';
  const { proxy }: any = getCurrentInstance();
  const publicStore = proxy.publicStore();
  const state = reactive({
    ...publicStore.$state,
  });
  let clickArr = $ref([])
  const connStateCb = (event) => {}
  const alarmcb = (data) => {}
  let type = $ref(1)
  let videoIndex = $ref(-1)
  let previewPara1 = $ref({})
  var conn = null;
  var prev = new Array();
  var previewParam = new Array();
  var cmd = 0;

 const props = defineProps({
    state: {
      type: [Object, Array],
      default: ()=>{return {}}
    },
  })

  onUnmounted(async() => {
    destroyConn(conn)
  })

  watch(() => publicStore._public.cameraList, async (val) => {
    if(proxy.isNull(val)) return
    await nextTick();
    startVideo()
  },{ immediate: false, deep: true });
 
  // 开始连接
  const startVideo = async() => {
    console.log('视频服务ip---', proxy.getHttp('ip'))
    getPreviewDemo()
    var loginParam = {
      ip  : proxy.getHttp('ip'),
      port : 8803,
      user : "admin",
      password : "96e79218965eb72c92a549dd5a330112",
      state : connStateCb,
      alarmcallback : alarmcb
    }
    conn = createConn(loginParam, null);
    setTimeout(previewDemo, 1000);
  }

  const getPreviewDemo = async() => {
    let tempArr = []
    publicStore._public.cameraList.forEach((item, index) => {
      let temp = {dom: '', id: "video" + index, hwnd: document.getElementById("video" + index), devip: item.video_ip, port: parseInt(item.video_port), chn: parseInt(item.video_chn)}
      let exist = tempArr.find(a=>a.devip == item.video_ip && parseInt(a.port) == parseInt(item.video_port) && parseInt(a.chn) == parseInt(item.video_chn))
      if(exist) temp.dom = exist.hwnd
      tempArr.push(temp)
    })
    previewParam = tempArr
  }

  const previewDemo = () => {
    previewParam.forEach((item, index) => {
      prev[index] = startPreview(conn, previewParam[index]);
    })
  }

  const clickVideo = (index) => {
    if(videoIndex == index) return videoIndex = -1
    videoIndex = index
  }

  window.clickVideo = clickVideo;

  // stop 1开始 0暂停
  const onmousePtzControl = (cmd, stop) => {
    console.log(stop == 1 ? '按下' : '抬起')
    if (videoIndex == -1) return console.error('无点击视频', videoIndex)
    var ptzParam = {
        devip: prev[videoIndex].previewPara.devip,
        devport: prev[videoIndex].previewPara.port,
        chn: prev[videoIndex].previewPara.chn,
        cmd: cmd,
        stop: stop,
        speed: 5,
        preset: 1,
    }
    console.log('_onmousePtzControl', ptzParam)
    ptzControl(conn, ptzParam);
  }

  // 停止视频
  const stopV = (item, index) => {
    console.log('暂停', prev)
    stopPreview(prev[index]);
  }

  // 开始视频
  const startV = (item, index) => {
    console.log('开始', prev)
  }

  document.addEventListener("contextmenu", function (event) {
      event.preventDefault();
  });


</script>
  
<style scoped lang="scss">
  :deep(.el-loading-spinner .circular){
    width: 25px;
    height: 25px;
  }
  :deep(.el-loading-mask){
    top: 10px;
  }
  :deep(.el-select__input){
    color: #fff;
  }
  .newbox0{
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(65, 255, 255, 0.2);
    box-sizing: border-box;
    height: auto;
  }
  .newbox1{
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(51, 204, 0, 0.8);
    box-sizing: border-box;
    height: auto;
  }
  .newbox2{
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(200, 17, 133, 0.8);
    box-sizing: border-box;
    height: auto;
  }
  .newbox3{
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(253, 104, 2, 0.8);
    box-sizing: border-box;
    height: auto;
  }
  .buttonStyle{
    color: #41FFFF;
    font-weight: bold;
    padding: 4px;
    display: flex;
    align-items: center;
    width: 26px;
    height: 26px;
    text-align: center;
    border-radius: 4px;
    opacity: 1;
    background: radial-gradient(63% 63% at 50% 50%, rgba(46,110,255,0.33) 7%, #232BA5 100%);
    box-sizing: border-box;
    border: 1px solid #246DE1;
  }
  .buttonStyle2{
    color: #41FFFF;
    font-weight: bold;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    text-align: center;
    border-radius: 4px;
    opacity: 1;
    background: radial-gradient(63% 63% at 50% 50%, rgba(46,110,255,0.33) 7%, #232BA5 100%);
    box-sizing: border-box;
    border: 1px solid #246DE1;
  }
  .video{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    object-fit: fill;
    background-color: black;
    z-index: -9999;
  }
  #video2{
    width: 100%;
    height: 100%;
    object-fit: fill;
    background-color: black;
  }
  ul, li {
    margin: 0;
    padding: 0;
  }
  #myMenu {
    list-style: none;
    width: 150px;
    background-color: #ffffff;
    position: absolute;
    top: 10px;
    left: 10px;
    color: #000;
    // display: none;
  }

  #myMenu li {
    border-bottom: 1px solid #ccc;
    padding: 5px 10px;
    cursor: pointer;
  }

  #myMenu li:hover {
    background-color: #00ff00;
  }
</style>
  

    <!-- <div class="flex2 ww100 flex-col-ss mb15 hidden">
      <div class="flex-bc ww100 mb5">
        <span>视频监控</span>
        <span>
          <img class="ml5 cursor" src="@/assets/images/e1.png" @click="type = '1'">
          <img class="ml5 cursor" src="@/assets/images/e2.png" @click="type = '4'">
          <img class="ml5 cursor" src="@/assets/images/e3.png" @click="type = '9'">
        </span>
      </div>
      <div class="ww100 flex1 overlay tc flex-ss warp hidden">
        <div v-for="(v, i) in list" :key="i" class="borderstyle relative rad12 hidden" :class="type=='1'?'list1-10 hh100':type=='4'?'list2-10':'list3-10'" style="box-sizing: border-box;">
          <video class="video" muted="true" autoplay="true" :id="'video'+i" preload="true" @click.stop="clickVideo(i)"></video>
          <table v-show="videoIndex == i" class="absolute t10 r10 z2">
            <tr>
              <td><button class="buttonStyle" @mousedown="onmousePtzControl(5,0)" @mouseup="onmousePtzControl(5,1)"><i-ep-topLeft /></button></td>
              <td><button class="buttonStyle" @mousedown="onmousePtzControl(1,0)" @mouseup="onmousePtzControl(1,1)"><i-ep-top /></button></td>
              <td><button class="buttonStyle" @mousedown="onmousePtzControl(6,0)" @mouseup="onmousePtzControl(6,1)"><i-ep-topRight /></button></td>
            </tr>
            <tr>
              <td><button class="buttonStyle" @mousedown="onmousePtzControl(3,0)" @mouseup="onmousePtzControl(3,1)"><i-ep-back /></button></td>
              <td></td>
              <td><button class="buttonStyle" @mousedown="onmousePtzControl(4,0)" @mouseup="onmousePtzControl(4,1)"><i-ep-right /></button></td>
            </tr>
            <tr>
              <td><button class="buttonStyle" @mousedown="onmousePtzControl(7,0)" @mouseup="onmousePtzControl(7,1)"><i-ep-bottomLeft /></button></td>
              <td><button class="buttonStyle" @mousedown="onmousePtzControl(2,0)" @mouseup="onmousePtzControl(2,1)"><i-ep-bottom /></button></td>
              <td><button class="buttonStyle" @mousedown="onmousePtzControl(8,0)" @mouseup="onmousePtzControl(8,1)"><i-ep-bottomRight /></button></td>
            </tr>
            <tr>
              <td class="f14">焦距</td>
              <td><button class="buttonStyle2" @mousedown="onmousePtzControl(9,0)" @mouseup="onmousePtzControl(9,1)"><img src="@/assets/images/bbig.png"></button></td>
              <td><button class="buttonStyle2" @mousedown="onmousePtzControl(10,0)" @mouseup="onmousePtzControl(10,1)"><img src="@/assets/images/bsmall.png"></button></td>
            </tr>
            <tr>
              <td class="f14">焦点</td>
              <td><button class="buttonStyle2" @mousedown="onmousePtzControl(11,0)" @mouseup="onmousePtzControl(11,1)"><img src="@/assets/images/light1.png"></button></td>
              <td><button class="buttonStyle2" @mousedown="onmousePtzControl(12,0)" @mouseup="onmousePtzControl(12,1)"><img src="@/assets/images/light2.png"></button></td>
            </tr>
          </table>
          <div class="absolute t10 l10 z3 none" @click="stopV(v, i)">停止</div>
          <div class="absolute t10 l10 z3 none" @click="startV(v, i)">开始</div>
        </div>
      </div>
    </div> -->
 

